<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>productList</title>
    <style>
        #ta {
            border-collapse: collapse;
        }
        #ta th, #ta td {
            border: 1px solid black;
            height: 40px;
        }
        #ta tbody tr {
            cursor: pointer;
        }
    </style>
    <script src="./jquery-1.9.0.js"></script>
    <script src="../template.js"></script>
    <script>
        $(()=>{
            $.getJSON("/ajax/day02/selectAllProduct.php",(result)=>{
                console.log(result);
                let arr = result.data;
                // arr.forEach(p => {
                //     let tr = `<tr onclick='loadProduct(${p.p_id})' ><td>${p.p_id}</td><td>${p.p_name}</td></tr>`;
                //     $("#ta tbody").append(tr);
                // });
                let html = template("tableTemplate", result);
                console.log(html);
                $("#ta tbody").html(html);
            });
        });

        function loadProduct(id) {
            console.log('loadProduct');
            $.getJSON("/ajax/day02/selectProductById.php", {id}, result => {
                console.log(result);
                let p = result.data;

        //         $("#d1").html(`<h2>当前选中的商品</h2>
        // <div>编号:${p.p_id}</div>
        // <div>名称:${p.p_name}</div>
        // <div>简介:${p.p_info.replace(/\</, "&lt;")}</div>
        // <div>单价:${p.p_price}</div>
        // <div>单位:${p.p_unit}</div>
        // <div>图片: <img style='width:200px' src="${p.p_image_url}" alt=""> </div>`);

                // productTemplate
                // 参数： 模板id, 数据(必须是有直接属性名的, 不能是数组这类对象)
                let html = template("productTemplate", p);
                console.log('html:', html);
                $("#d1").html(html);
            });
        }

    </script>
</head>
<body>
    <table id="ta" >
        <thead>
            <tr>
                <td>序号</td>
                <td>编号</td>
                <td>商品名称</td>
                <td>name</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script id="tableTemplate" type="text/html" >
        {{each data p index1}}
        <tr onclick="loadProduct({{p.p_id}})" >
            <td>{{index1+1}}</td>
            <td>{{p.p_id}}</td>
            <td>{{p.p_name}}</td>
            <td>
                {{each p.p_name ch index2}}
                    {{ch + '='}} 
                {{/each}}
            </td>
        </tr>
        {{/each}}
    </script>
    <!-- 鼠标点击对应行的商品, 发送ajax请求查询该商品信息, 在下面的div中展示 -->
    <div id="d1" >
        <h2>当前选中的商品</h2>
        <div>编号:1</div>
        <div>名称:xxxd</div>
        <div>简介:xxxd</div>
        <div>单价:xxxd</div>
        <div>单位:xxxd</div>
        <div>图片: <img style="width:200px" src="" alt=""> </div>
    </div>
    <script id="productTemplate" type="text/html" >
        <!-- {{属性名}} -->
        <h2>当前选中的商品</h2>
        <div>编号:{{p_id}}</div>
        <div>名称:{{p_name}}</div>
        <div>简介:{{p_info}}</div>
        <div>单价:{{p_price}}</div>
        <div>单位:{{p_unit}}</div>
        <div>图片:
            {{if p_image_url == null || p_image_url == ''}}
            <img style="width:200px" src="./logo.png" alt="暂无图片">
            {{else if p_image_url != ''}}
            <img style="width:200px" src="{{p_image_url}}" alt="暂无图片">
            {{/if}}
        </div>
    </script>
</body>
</html>